checkToken()

// 显示弹框
//获取模态框
const modalDom = document.querySelector('#modal')
//实例化
const modal = new bootstrap.Modal(modalDom)
document.querySelector('#openModal').addEventListener('click', function () {
  modal.show()
})


//渲染大表单
const list = document.querySelector('.list')
async function renderList() {
  const { data } = await axios.get('/students')
  // console.log(data)
  list.innerHTML = data.map(item => {
    return `
    <tr>
      <td>${item.name}</td>
      <td>${item.age}</td>
      <td>${item.gender == 0 ? '男' : '女'}</td>
      <td>${item.group}</td>
      <td>${item.hope_salary}</td>
      <td>${item.salary}</td>
      <td>${item.province}${item.city}${item.area}</td>
      <td>
        <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id="${item.id}"></i></a>
        <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id="${item.id}"></i></a>
      </td>
    </tr>
    `
  }).join('')
  renderNumber()
}
renderList()



// 数据增删改查

//定义一个标识
let rowId

//添加业务
document.querySelector('#openModal').addEventListener('click', function () {
  rowId = null
  modal.show()
})
//确认隐藏业务
document.querySelector('#submit').addEventListener('click', async function () {
  modal.hide()
})

//编辑业务/删除业务，数据回显
list.addEventListener('click', async function (e) {
  if (e.target.classList.contains('bi-pen')) {
    rowId = e.target.dataset.id
    // console.log(rowId)
    modal.show()
    //!!!!!!!!!!!!!!!!数据回显!!!!!!!!!!!!!!!!!!!!!!!!!!
    const { data } = await axios.get('/students/' + rowId)
    // console.log(data)
    //1.简单内容回显
    //规划表单进行赋值
    const resArr = ['name', 'age', 'salary', 'group', 'hope_salary']
    resArr.forEach(item => {
      document.querySelector(`[name=${item}]`).value = data[item]
    })
    //2.性别回显
    const genders = document.querySelectorAll('[name=gender]')
    genders[data.gender].checked = true
    // document.querySelector(`[name=gender][value=${data.gender}]`).checked = true
    // console.log(data.gender)
    //3.省市区回显
    const { province, city, area } = data
    const selectP = document.querySelector('[name="province"]')
    const selectC = document.querySelector('[name="city"]')
    const selectA = document.querySelector('[name="area"]')
    selectP.value = province
    const { list: list1 } = await axios.get(`/api/city?pname=${province}`)
    const qwe1 = list1.map(item => `<option value="${item}">${item}</option>`).join('')
    selectC.innerHTML = `<option value="">--城市--</option>` + qwe1
    selectC.value = city
    const { list: list2 } = await axios.get(`/api/area?pname=${province}&cname=${city}`)
    const qwe2 = list2.map(item => `<option value="${item}">${item}</option>`).join('')
    selectA.innerHTML = `<option value="">--地区--</option>` + qwe2
    selectA.value = area


  }
  //删除按钮
  if (e.target.classList.contains('bi-trash')) {
    const id = e.target.dataset.id
    const flag = confirm('您确认删除吗？')
    if (flag) {
      await axios.delete('/students/' + id)
      showToast('删除成功')
      renderList()
      renderNumber()
    }
  }
})
//!监听模态框是否显示 显示修改模态框标题
modalDom.addEventListener('show.bs.modal', event => {
  document.querySelector('.modal-title').innerHTML = rowId ? '编辑学生信息' : '添加学生信息'
})


//实例化渲染表单
// 表单渲染省城区
async function initSelect() {
  const selectC = document.querySelector('[name="city"]')
  const selectA = document.querySelector('[name="area"]')
  //省份
  const { list: pname } = await axios.get('/api/province')
  // console.log(pname)
  const qwe1 = pname.map(item => {
    return `<option value="${item}">${item}</option>`
  }).join('')
  const selectP = document.querySelector('[name="province"]')
  selectP.innerHTML = `<option value="">--省份--</option>` + qwe1
  selectC.innerHTML = `<option value="">--城市--</option>`
  selectA.innerHTML = `<option value="">--地区--</option>`
  // console.log(selectP)//省列表
  selectP.addEventListener('change', async function () {
    const selectedValue = selectP.value
    // console.log(selectedValue) //省份
    //城市
    const { list: cname } = await axios.get(`/api/city?pname=${selectedValue}`)
    // console.log(cname)//市列表
    const qwe2 = cname.map(item => {
      return `<option value="${item}">${item}</option>`
    }).join('')
    selectC.innerHTML = `<option value="">--城市--</option>` + qwe2
    selectA.innerHTML = `<option value="">--地区--</option>`
    selectC.addEventListener('change', async function () {
      const selectedValue2 = selectC.value
      // console.log(selectedValue2) //城市
      const { list } = await axios.get(`/api/area?pname=${selectedValue}&cname=${selectedValue2}`)
      // console.log(list)//区列表
      const qwe3 = list.map(item => {
        return `<option value="${item}">${item}</option>`
      }).join('')

      selectA.innerHTML = `<option value="">--地区--</option>` + qwe3
    })
  })
}
initSelect()
//渲染基本数据与提交 点击确定按钮
const form = document.querySelector('#form')
document.querySelector('#submit').addEventListener('click', async function () {
  if (rowId) {
    //编辑
    const data = serialize(form, { hash: true, empty: true })
    data.age = +data.age
    data.gender = +data.gender
    data.group = +data.group
    data.salary = +data.salary
    data.hope_salary = +data.hope_salary
    // console.log(data)
    await axios.put('/students/' + rowId, data)
    showToast('编辑成功')
    renderList()
  }
  else {
    const data = serialize(form, { hash: true, empty: true })
    data.age = +data.age
    data.gender = +data.gender
    data.group = +data.group
    data.salary = +data.salary
    data.hope_salary = +data.hope_salary
    // console.log(data)
    await axios.post('/students', data)
    showMsg('success', '添加成功')
    renderList()
    form.reset()
    renderNumber()
  }
})

function renderNumber() {
  const list = document.querySelector('tbody.list');
  const rows = list.querySelectorAll('tr'); 
  const rowCount = rows.length; 
  console.log('列表中 <tr> 的数量:', rowCount);
  document.querySelector('.total').innerHTML = list.querySelectorAll('tr').length
}
// setTimeout(() => {
//   renderNumber()
// }, 500);
